import React, { Component } from 'react';
import Input from './Input';
import List from './List';
import Operation from './Operation';

export default class App extends Component {
  state = {
    todos: [
      { id: '001', value: 'aa', done: false },
      { id: '002', value: 'bb', done: true },
      { id: '003', value: 'cc', done: false },
      { id: '004', value: 'dd', done: false },
      { id: '005', value: 'ee', done: false }
    ]
  }
  addTodoItem = (todoItem) => {
    const { todos } = this.state;
    const newTodos = [todoItem, ...todos];
    this.setState({ todos: newTodos });
  }
  deleteTodoItem = (todoId) => {
    const newTodos = this.state.todos.filter(todo => todo.id != todoId);
    this.setState({ todos: newTodos });
  }
  editTodoItem = (todoItem, edit) => {
    const { todos } = this.state;
    todos.forEach(todo => {
      if (todo.id == todoItem.id) {
        [...Object.keys(edit)].forEach(key => {
          todo[key] = edit[key];
        })
      }
    })
    this.setState({ todos })
  }

  seletAll = (checkedFlag) => {
    const { todos } = this.state;
    todos.forEach(todo => {
      todo['done'] = checkedFlag;
    })
    this.setState({ todos });
  }
  clearAll = () => {
    this.setState({ todos: [] })
  }
  render() {
    return (
      <>
        <Input addTodoItem={this.addTodoItem} />
        <List todos={this.state.todos} deleteTodoItem={this.deleteTodoItem} editTodoItem={this.editTodoItem}></List>
        <Operation seletAll={this.seletAll} todos={this.state.todos} clearAll={this.clearAll}></Operation>
      </>
    )
  }
};

